<template>
  <div class="loginpass">
    <van-icon @click="goHome" class="icon" name="arrow-left" size="20" />
    <a href="#/login" class="reg">注册</a>
    <div class="header">
      <h6>账号密码登录</h6>
      <p>未注册手机验证后即完成注册</p>
    </div>
    <div class="section">
      <p>手机号</p>
      <input type="text" placeholder="请输入手机号码" />
      <p>密码</p>
      <input type="password" placeholder="请输入密码" />
      <button>登录</button>
      <a href="#/login">手机号登录</a>
    </div>
  </div>
</template>

<script setup>
const goHome = () => history.back();
</script>

<style scoped>
.header {
  overflow: hidden;
  width: 100%;
  height: 2.48rem;
  box-sizing: border-box;
  background-image: url(https://product-ssl-qiniu.bmtrip.com/20191125_banner.png);
  background-size: cover;
  position: relative;
  padding: 0 1rem;
}
.icon {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 100;
}
.reg {
  position: absolute;
  font-size: 0.36rem;
  text-decoration: none;
  color: #333;
  right: 0.6rem;
  top: 0.3rem;
  z-index: 100;
}
.header h6 {
  font-size: 0.43rem;
  font-weight: 400;
  margin-top: 1rem;
}
.header p {
  font-size: 0.2rem;
  color: #666;
}
.section {
  box-sizing: border-box;
  padding: 0 1rem;
  font-size: 0.3rem;
}
.section p {
  margin: 0.3rem 0;
}
.section input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e2e0e0;
  color: #403e3e;
  margin: 0.2rem 0;
  font-size: 0.36rem;
  height: 0.8rem;
  outline-style: none;
}
.section button {
  width: 100%;
  border: none;
  background-color: #e2a0b9;
  height: 0.86rem;
  color: #fff;
  font-size: 0.3rem;
  margin: 0.3rem 0;
}
.section a {
  font-size: 0.2rem;
  color: #666;
  text-decoration: none;
}
</style>
